<!--
 * @Author: 冕上 cxm66888@163.com
 * @Date: 2024-10-15 16:02:56
 * @LastEditors: 冕上 cxm66888@163.com
 * @LastEditTime: 2024-12-24 11:41:05
 * @Description: 
 * 
 * Copyright (c) 2024 by xiaoMing.Cao, All Rights Reserved. 
-->
<template>
  <div class="bottle">
    <div class="bottle-head">
      <el-form :inline="true" :model="data.form" class="demo-form-inline" size="default">
        <el-form-item label="瓶子状态">
          <el-select v-model="data.form.bottleStatus" placeholder="请选择瓶子状态">
            <el-option label="全部" value="" />
            <el-option label="未打捞" value="active" />
            <el-option label="已打捞" value="locked" />
          </el-select>
        </el-form-item>
        <el-form-item label="瓶子类型">
          <el-select v-model="data.form.bottleType" placeholder="请选择瓶子类型">
            <el-option label="全部" value="" />
            <el-option label="真实瓶子" value="real" />
            <el-option label="机器瓶子" value="machine" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottle-mian">
      <el-table :data="data.list" style="width: 100%">
        <el-table-column label="头像" width="180" style="display: flex; align-items: center">
          <template #default="scope">
            <el-avatar shape="square" :size="50" :src="scope.row.avatarUrl" />
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="180" />
        <el-table-column label="性别" width="180">
          <template #default="scope">
            <span v-if="scope.row.gender == 'male'">男</span>
            <span v-else-if="scope.row.gender == 'female'">女</span>
            <span v-else>未知</span>
          </template>
        </el-table-column>
        <el-table-column label="瓶子类型" width="180">
          <template #default="scope">
            <span>{{ scope.row.isMachine ? '机器瓶子' : '真实瓶子' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" />
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-popconfirm title="确认是否删除当前瓶子？" @confirm="confirmEvent(scope.row, 'dele')">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button type="warning" v-if="!scope.row.isMachine" @click="confirmEvent(scope.row, 'blacklist')">拉黑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 15px" :size="parament.pageSize" :page-size="parament.pageSize" @change="pageChange" background layout="prev, pager, next" :total="data.total" />
    </div>
    <el-dialog v-model="dialogFormVisible" title="拉黑并删除" width="500">
      <el-select v-model="dialogForm.region" placeholder="请选择拉黑时长">
        <el-option label="1天" value="1" />
        <el-option label="3天" value="3" />
        <el-option label="5天" value="5" />
        <el-option label="10天" value="10" />
        <el-option label="30天" value="30" />
        <el-option label="永久" value="9999" />
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitDialog">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { onMounted, ref, reactive } from 'vue';
  import { getBottleList, deleteBottle } from '@/api/role';
  const data = reactive({
    // 真实瓶子
    list: [],
    form: {
      bottleStatus: '',
      bottleType: ''
    },
    total: 0
  });

  const parament = reactive({
    pageSize: 10,
    pageIndex: 1
  });

  const dialogForm = reactive({
    region: '',
    currentData: {}
  });
  const dialogFormVisible = ref(false);

  const submitDialog = () => {
    deleteBottle({
      id: dialogForm.currentData._id,
      isBlack: true,
      userId: dialogForm.currentData.userId,
      date: dialogForm.region
    }).then(res => {
      if (res.code == 200) {
        dialogFormVisible.value = false;
        getList();
        ElMessage({
          type: 'success',
          message: '处理成功'
        });
      }
    });
  };

  const getList = () => {
    getBottleList(Object.assign(data.form, parament)).then(res => {
      if (res.code == 200) {
        data.list = res.data?.data ?? [];
        data.total = res.data?.total ?? 0;
      }
    });
  };
  const submitForm = () => {
    getList();
  };

  const confirmEvent = (item, type) => {
    dialogForm.currentData = item;
    if (type == 'blacklist') {
      dialogFormVisible.value = true;
    } else {
      deleteBottle({
        id: dialogForm.currentData._id,
        userId: dialogForm.currentData.userId,
        isBlack: false
      }).then(res => {
        if (res.code == 200) {
          dialogFormVisible.value = false;
          getList();
          ElMessage({
            type: 'success',
            message: '处理成功'
          });
        }
      });
    }
  };

  const pageChange = item => {
    parament.pageIndex = item;
    getList();
  };

  const resetForm = () => {
    data.form = {
      bottleStatus: '',
      bottleType: ''
    };
    getList();
  };
  getList();
</script>
<style scoped lang="scss">
  .bottle {
    padding: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .bottle-head,
    .bottle-mian {
      background-color: #fff;
      display: flex;
      padding: 15px;
      box-sizing: border-box;
      width: 100%;
      margin-bottom: 15px;
      flex-direction: column;
    }
  }
  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  .el-table__header {
    background-color: #d3e3fd;
  }
</style>
